<template>
    <div>
        <my-head title="影院" :back="false" ></my-head>
        <div class="menu">
            <van-dropdown-menu>
                <van-dropdown-item :title="areas[current].name" ref="item" >
                    <div class="alist">
                        <div class="aitem" @click="changeList(l,i)" :class="current==i?'active':''" v-for="(l,i) in areas" :key="i">
                            {{l.name}}
                        </div>
                    </div>
                </van-dropdown-item>

                <van-dropdown-item v-model="value" :options="option"  @change="priceSort"/>
            </van-dropdown-menu>
        </div>
        <mlist :list="list"></mlist>
    </div>
</template>

<script>
export default {
    data(){
        return {
            current:0,
            cinemas:[],
            value:0,
            option: [
                { text: '价格排序', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 },
            ],
            list:[],
            areas:[{
                name:"全城",
                id:0
            }]
        }
    },
    methods:{
        changeList(l,i){
            console.log(l)
            this.current = i;
            this.$refs.item.toggle()
            if(i==0){
                this.list =  [...this.allCinemas]
            }else{
                this.list = this.allCinemas.filter(item=>item.districtName==l.name);

                // 价格
                if(this.value==1){
                    this.list.sort(this.priceAsc)
                }else{
                    this.list.sort(this.priceDesc)
                }
            }
        },
        priceDesc(a,b){
            return b['lowPrice'] - a['lowPrice']
        },
        priceAsc(a,b){
            return a['lowPrice'] - b['lowPrice']
        },
        priceSort(value){
            console.log(value)
            if(value==0){
                console.log("asdsdasads")
                if(this.current==0){
                     this.list = [...this.allCinemas   ]
                }else{
                     this.list = [...this.allCinemas.filter(item=>item.districtName==this.areas[this.current].name) ]
                }
                // this.list = [...this.allCinemas.filter(item=>item.districtName==this.areas[this.current].name) ]
               
            }else if(value==1){
                this.list.sort(this.priceAsc)
            }else{
                this.list.sort(this.priceDesc)
            }
        },
        async getCinemas(){
            let {data} = await this.$ajax.getMZdata({
                cityId:this.city.cityId,
            },{
                'X-Host': 'mall.film-ticket.cinema.list'
            })
            this.list = data.cinemas;  // 当前城市所有的电影院 
            this.changeAllCinemas(data.cinemas)   // mutations

            var obj = {}
            for(var i=0;i<data.cinemas.length;i++){
                var item = data.cinemas[i]
                // obj.江岸区 = 江岸区
                if(!obj[item.districtName]){
                    obj[item.districtName] = item.districtName
                    this.areas.push(item.district)
                }
            }
            console.log(obj)
            console.log(this.areas)
        }
    },
    mounted(){
        if(this.city){
           this.getCinemas()
            // this.getCinemasAsync(this.city.cityId)
            // this.list = this.allCinemas;
        }else{
            // 弹框提示去选择 
            this.$dialog.alert({
                title: '选择城市',
                message: '请选去选择你当前所在的城市',
            }).then(() => {
            // on close
                this.$router.push({
                    name:'city'
                })
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.alist{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0 0 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    // z-index: 1000;
    .aitem{
        font-size: 12px;
        display: inline-block;
        width: calc(25vw - 12.5px);
        margin:0 10px 10px 0;
        // padding-bottom: 15px;
        // padding-right: 15px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        border:0.5px solid #ededed;
        border-radius: 5px;
    }
    .active{
         border:0.5px solid #ff5f16;
         color:#ff5f16;
    }
   
}

</style>